{% extends 'CatalogMitsubishiBundle:Default:b_groups_list.html.twig' %}
{% set hidden = "hidden" %}
{% block summary %}
    {{ parent() }}
{% endblock summary %}
{% block body %}
<h3>Выбрать запчасть:</h3>
    {% set newArray = [] %}
<div class="row">
    <div class="col-xs-3">
    {% for key, data in pncs %}
        {% if key in pncCoordsCodes %}
            <div id="pnc_{{ key}}" class="small" ><b>{{ key }} {{ data.descEn }}</b></div>
            {% if pnc == key %}
                {% set hidden = "" %}
            {% else %}
                {% set hidden = "hidden" %}
            {% endif %}
            <div id="prt_{{ key }}" class="{{ hidden }}">
                <table class="table small">
                    <thead>
                    <td>Артикул</td>
                    <td>Начало производства</td>
                    <td>Конец производства</td>
                    <td>Количество</td>
                    </thead>
<tbody>
                {% for item in data.partNumbers %}
                    <tr>
                        <td><a href="http://v3.ryli.by/search/preload/?article={{ item.partNumber }}" target="_blank">{{ item.partNumber }}</a></td>
                        <td>{{ item.startDate|slice(4,2) }}/{{ item.startDate|slice(0,4) }}</td>

                        <td>
                            {% if item.endDate != "" %}
                                {{ item.endDate|slice(4,2) }}/{{ item.endDate|slice(0,4) }}
                            {% else %}
                                ...
                            {% endif %}
                        </td>

                        <td>{{ item.quantity }}</td>
                    </tr>
                {% endfor %}
</tbody>
                </table>
            </div>
            <script>
                $("#pnc_{{ key }}").on("mouseover", function(){
                    $('img').mapster('set', true, '{{ key }}');
                    $(this).css('cursor', 'pointer');
                    $(this).addClass('btn-info');
                });
                $("#pnc_{{ key }}").on("mouseout", function(){
                    $('img').mapster('set', false, '{{ key }}');
                    $(this).removeClass('btn-info');
                });
                $("#pnc_{{ key }}").on("click", function(){
                    $('#prt_{{ key }}').toggleClass("hidden");
                });
            </script>
        {% endif%}
    {% endfor %}
    </div>
    <div class="col-xs-9">
        <map name="{{ illustration }}">
        {% for data in pncCoords %}
                {% if data.code in pncs|keys %}
                <area id="area{{ data.code }}{{ data.startX }}" data-name="{{ data.code }}" shape="rect" coords="{{ data.startX }},{{ data.startY }},{{ data.startX+data.endX }},{{ data.startY+data.endY }}" href="#" title="{{ data.code }}"/>
                <script>
                    $("area#area{{ data.code }}{{ data.startX }}").on("mouseover", function(){
                        $("#pnc_{{ data.code }}").addClass("btn-info");
                    });
                    $("area#area{{ data.code }}{{ data.startX }}").on("mouseout", function(){
                        $("#pnc_{{ data.code }}").removeClass("btn-info");
                    });
                    $("area#area{{ data.code }}{{ data.startX }}").on("click", function(){
                        $("#prt_{{ data.code }}").removeClass("hidden");
                    });
                </script>
                {% elseif data.code|slice(2,1) == " "%}
                    <area id="area{{ data.code }}{{ data.startX }}" data-name="{{ data.code }}{{ data.startX }}" shape="rect" coords="{{ data.startX }},{{ data.startY }},{{ data.startX+data.endX }},{{ data.startY+data.endY }}" href="{{ path('catalog_mitsubishi_bgroups_list', {'catalog': catalog,  'model': model, 'catalogNum': catalogNum, 'classification': classification, 'mainGroup': data.code|slice(0,2), 'subGroup': data.code|slice(3,3)}) }}" title="{{ data.code }}"/>
                {% endif %}
    {% endfor %}
    </map>
    <img src="{{ asset('bundles/catalogmitsubishi/images/'~catalog~'/'~illustration~'.png') }}" usemap="#{{ illustration }}" />

    </div>
</div>
    <script>
        $('img').mapster({
            fillColor: '70daf1',
            fillOpacity: 0.3,
            mapKey: 'data-name',
            clickNavigate: true
        });
    </script>
{% endblock body %}